import React from "react";
import styles from './ProductCollection.module.css';
import { Row, Col, Divider } from "antd";
import { ProductImage } from './ProductImage';

interface PorpsType {
  title: JSX.Element;
  sideImage: string;
  products: any[];
}

export const ProductCollection: React.FC<PorpsType>= ({title, sideImage, products}) => {
  const productListTwo = products.slice(1, 3)
  const bottomList = products.slice(5) // 下方数据

  return (
    <div className={styles.content}>
      <Divider orientation="left">{title}</Divider>
      <Row>
        <Col span={4}> {/** 左侧图片 */}
          <img src={sideImage} className={styles["side-image"]} alt="" />
        </Col>
        <Col span={20}> {/** 右侧布局 */}
          <Row>
            <Col span={12}>
              <ProductImage 
                id={products[0].id}
                size={"large"}
                title={products[0].title}
                imageSrc={products[0].touristRoutePictures[0].url}
                price={products[0].price}
              />
            </Col>
            <Col span={12}>
            <Row>
              {
                productListTwo.map((item, index) => (
                  <Col span={12} key={`two_${index}`}>
                    <ProductImage
                      id={item.id}
                      size="small"
                      title={item.title}
                      imageSrc={item.touristRoutePictures[0].url}
                      price={item.price}
                    />
                  </Col>
                ))
              }
            </Row>
            <Row>
              <Col span={12}>
                <ProductImage
                  id={products[3].id}
                  size="small"
                  title={products[3].title}
                  imageSrc={products[3].touristRoutePictures[0].url}
                  price={products[3].price}
                />
              </Col>
              <Col span={12}>
                <ProductImage
                  id={products[4].id}
                  size="small"
                  title={products[4].title}
                  imageSrc={products[4].touristRoutePictures[0].url}
                  price={products[4].price}
                />
              </Col>
            </Row>
            </Col>
          </Row> {/**上面布局 */}
          <Row>
            {
              bottomList.map((item, index) => (
                <Col span={6} key={`col_${index}`}>
                  <ProductImage
                    id={item.id}
                    size="small"
                    title={item.title}
                    imageSrc={item.touristRoutePictures[0].url}
                    price={item.price}
                  />
                </Col>
              ))
            }
          </Row>
        </Col>
      </Row>
    </div>
  )
}